<template>
 <div class="p-2">
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <div style="font-weight: bold; margin-right: 12px;">需求确认人员列表</div>
        <a-button  type="primary" preIcon="ant-design:export-outlined" @click="onExportXls" v-if="false"> 导出</a-button>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction()"/>
      </template>

    </BasicTable>


   </div>
</template>

<script lang="ts" setup>
  import { ref, unref, inject, watch, defineEmits, defineExpose } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage'
  import { getRequirementList, customerPrincipalExportXlsUrl, deleteDeveloper } from './CustomersPool.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  
  //接收主表id
  const mainId = inject('customerId') || '';
  //提示弹窗
  const $message = useMessage()
  const queryParam = {};
  const emit = defineEmits(['refreshMain']);
  // 列表页面公共参数、方法
  // 定义需求确认人员表的列
  const requirementColumns = [
    { title: '开发人员姓名', align: 'center' as const, dataIndex: 'developerName' },
    { title: '角色', align: 'center' as const, dataIndex: 'developRole' },
    { title: '邮箱', align: 'center' as const, dataIndex: 'email' },
    { title: '创建人', align: 'center' as const, dataIndex: 'createBy', defaultHidden: true },
    { title: '创建时间', align: 'center' as const, dataIndex: 'createTime' },
    { title: '所属部门', align: 'center' as const, dataIndex: 'sysOrgCode', defaultHidden: true }
  ];

  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      api: getRequirementList,
      columns: requirementColumns,
      canResize: false,
      useSearchForm: false,
      actionColumn: {
        width: 180,
        fixed:'right'
      },
      beforeFetch: (params) => {
        // 确保传递customerId参数
        if (unref(mainId)) {
          params.customerId = unref(mainId);
        }
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: '需求确认人员',
      url: customerPrincipalExportXlsUrl,
      params: {
        'customerId': mainId
      }
    },

  });

  //注册table数据
  const [registerTable, { reload}, { rowSelection, selectedRowKeys }] = tableContext;
  const formRef = ref();



  /**
   * 删除事件
   */
  function handleDelete(record: Recordable) {
    $message.createConfirm({
      iconType: 'warning',
      title: '确认删除',
      content: '确定要删除这条需求确认人员记录吗？',
      onOk: async () => {
        try {
          await deleteDeveloper({ id: record.id }, () => {
            $message.createMessage.success('删除成功');
            reload();
          });
        } catch (error) {
          $message.createMessage.error('删除失败');
        }
      }
    });
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '删除',
        color: 'error' as const,
        onClick: handleDelete.bind(null, record),
      },
    ]
  }
  
  /**
   * 下拉操作栏
   */
  function getDropDownAction(){
    return [];
  }
  
  /**
   * 重置
   */
  function searchReset() {
    formRef.value.resetFields();
    selectedRowKeys.value = [];
    //刷新数据
    reload();
  }
  
  watch(mainId, () => {
    if (unref(mainId)) {
      // 使用customerId作为参数名称，确保传递正确的主表ID
      queryParam['customerId'] = unref(mainId);
      console.log('设置customerId参数:', unref(mainId));
    } else {
      // 如果没有选中主表，则清空子表数据
      queryParam['customerId'] = '';
      tableContext[1].setTableData([]);
    }
    reload();
  });

  defineExpose({
    reload,
    searchReset
  });
</script>
<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    padding: 0;
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust{
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
  }
</style>
